<div class="sidebar" @slideRight *ngIf="modal.visible">

	<app-header [back]="true">
		<div header-back (click)="modal.onClose()">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				class="ai ai-ArrowLeft">
				<path d="M11 5l-7 7 7 7" />
				<path d="M4 12h16" />
			</svg>
		</div>
		<div header-title>

		</div>

	</app-header>
	<div class="sidebar-content no-padding">

		<div appLoader [loading]="loading" class="container">
			<div class="album">
				<div class="album-header">
					<div class="image">
						<img [src]="playlist.picture || '/assets/app-icon-text.png'" />
					</div>

					<div class="details">
						<h1>{{ playlist.name }}</h1>
						<p (click)="onProfile(playlist?.created_by?._id)">
							by {{ playlist?.created_by?.first_name }} {{ playlist?.created_by?.last_name }}
						</p>

						<button appRipple (click)="onPlay()">
							Play {{ playlist?.tracks?.length }} songs
						</button>

						<button appRipple (click)="onEdit(playlist)">
							Edit Playlist
						</button>

						<button appRipple (click)="onDelete()">
							Delete Playlist
						</button>
					</div>
				</div>

				<div class="album-tracks">
					<app-track-item [options]="{actions: true, picture: true, playlist: playlist._id }"
						(onRemoveFromPlaylist)="onRemove(track)" [track]="track" *ngFor="let track of playlist?.tracks">
					</app-track-item>
				</div>
			</div>



		</div>

	</div>

</div>